<template>
  <el-dialog
    @open="mixinOpen"
    @close="handleClose"
    :title="title"
    :visible="dialogVisible"
    width="80%"
  >
    <el-form
      :model="postData"
      :rules="postRules"
      label-width="120px"
      label-position="left"
      ref="postForm"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="房屋名字" prop="name">
            <el-input v-model="postData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地址" prop="address">
            <el-input v-model="postData.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租金" prop="rent">
            <el-input v-model.number="postData.rent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="imgs" label="相关图片">
            <upload-more ref="upload" :file-list="postData.imgs" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="description" label="相关描述">
            <el-input type="textarea" v-model="postData.description" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="areaId" label="地区名">
            <el-input readonly v-model="postData.areaName" />
            <hr />
            <el-tree
              :data="areaOptions"
              :props="defaultProps"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="是否学区房" prop="isSchool">
            <el-select v-model="postData.isSchool">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-show="postData.isSchool">
          <el-form-item label="选择学校" prop="schoolId">
            <el-select v-model="postData.schoolId">
              <el-option
                v-for="item in schoolOptions"
                :key="item.id"
                :label="item.text"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button @click="save" v-if="!opId" type="primary">暂 存</el-button>
      <el-button @click="pushOn" v-if="!opId" type="primary">上 架</el-button>
      <el-button @click="edit" v-if="opId" type="primary">修 改</el-button>
    </div>
  </el-dialog>
</template>

<script>
import postDialog from "../../../mixins/postDialog";
import getAreaList from "../../../mixins/getAreaList";
import axios from "axios";
import uploadMore from "../../../components/UploadMore/uploadMore";

export default {
  name: "postDialog",
  mixins: [postDialog, getAreaList],
  components: { uploadMore },
  data() {
    const validator = (rule, value, callback) => {
      if (!value && this.postData.isSchool) {
        return callback(new Error("请选择学校"));
      } else {
        callback();
      }
    };
    return {
      postData: {
        name: "",
        address: "",
        rent: "",
        areaId: "",
        isSchool: "",
        schoolId: "",
        status: "",
        areaName: "",
        imgs: "",
        description: ""
      },
      postRules: {
        name: [{ required: true, message: "请输入校区名字", trigger: "blur" }],
        address: [{ required: true, message: "请填写地址", trigger: "blur" }],
        rent: [{ required: true, message: "请填写租金", trigger: "blur" }],
        areaId: [{ required: true, message: "请选择地区", trigger: "blur" }],
        isSchool: [{ required: true, message: "请选择选择", trigger: "blur" }],
        schoolId: [{ trigger: "blur", validator }]
      },
      addUrl: "/api/house/house",
      schoolOptions: []
    };
  },
  methods: {
    handleNodeClick(data) {
      if (data.level !== 3) {
        return;
      }
      this.postData.areaId = data.id;
      this.postData.areaName = data.name;
      this.getSchoolOptions();
    },
    save() {
      this.postData.status = 1;
      this.postData.imgs = this.$refs.upload.getFiles().join();
      this.submit();
    },
    pushOn() {
      this.postData.status = 2;
      this.postData.imgs = this.$refs.upload.getFiles().join();
      this.submit();
    },
    edit() {
      this.postData.imgs = this.$refs.upload.getFiles().join();
      this.submit();
    },
    async getSchoolOptions() {
      const {
        data: { errno, message, data }
      } = await axios.get("/api/school/school", {
        params: {
          area_id: [+this.postData.areaId],
          pageSize: 10000
        }
      });
      if (!errno) {
        this.schoolOptions = data.data.map(item => ({
          value: item.id,
          text: item.name
        }));
      } else {
        this.$message({ type: "error", message });
      }
    },
    async mixinOpen() {
      await this.handleOpen();
      this.postData.areaId && this.getSchoolOptions();
    }
  }
};
</script>

<style scoped></style>
